function removeLoading() {
    // 给loading的div添加一个css类“hid”
    const loading = document.querySelector("#loading-mask")
    loading.classList.add("hid")

    // 等0.4秒之后再移除loading的div
    setTimeout(() => {
        document.body.removeChild(loading)
    }, 400)
}
function addLoading() {
    document.write(`
    
        <style>
            #loading-mask {
                display: flex;
                justify-content: center;
                align-items: center;
                position: fixed;
                left: 0;
                top: 0;
                background-color: white;
                height: 100vh;
                width: 100vw;
                opacity: 1;
                font-size: 36px;
                transition: all .3s;
            }
            
            #loading-mask.hid {
                opacity: 0;
            }
        </style>
        <div id="loading-mask">
            <p style="margin: 0">页面正在加载，请稍候~</p>
        </div>
    `)
}

/**
 * 初始化页面依赖和组件的导入
 * @param {String[]} components 要加载的Vue组件列表
 * @returns {Promise}
 */
function init(components) {
    return new Promise(((resolve, reject) => {
        // 先声明导入elementui的css和js
        let html = `
        <!--  加载基本CSS样式和插入一个加载遮罩层（就是一个div啦）      -->
        <script src="/src/api.js"></script>
        <script src="/src/utils.js"></script>
        <link rel="stylesheet" href="/src/style.css">
        <link rel="stylesheet" href="/src/editor.md-master/css/editormd.css">
        
        <!--  加载vue   -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <!--  加载axios   -->
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
        <!-- 引入ElementUI样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <!-- 加载富文本编辑器 -->
<!--        <script src="/src/editor.md-master/editormd.min.js"></script>-->
        <!-- 引入ElementUI组件库 -->
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <script src="/src/components/header.js"></script>
        `

        // 在基本库的基础上追加要加载的Vue组件(/src/components目录下的js文件)
        components.forEach(e => {
            html += `<script src="/src/components/${e}.js"></script>`
        })

        // 开始加载，把拼接好的html插入到文档
        document.write(html)

        // 基本库完成加载时执行的回调
        const importTemplate = () => {
            // 因为load事件可能会被多次触发，所以这里被触发一次之后最好移除掉监听器
            window.removeEventListener('load', importTemplate)

            // 约定每个页面的Vue实例id为app，在每个Vue实例DOM前面插入header组件
            const app = document.querySelector('#app')
            app.innerHTML = ('<my-header :is-login="isLogin" ></my-header>' + app.innerHTML)

            // 敲定init函数的Promise为已兑现状态
            resolve()

            // 移除页面的首屏加载效果
            removeLoading()
        }

        // 监听window的load事件（资源加载完毕的时候会触发），elementui的css和js完成加载之后再导入header模板
        window.addEventListener('load', importTemplate)
    }))
}
// 在这个js脚本被加载完之后立即添加loading，开启首屏加载
addLoading()